const displayedImage = document.querySelector(".displayed-img");
const thumbBar = document.querySelector(".thumb-bar");

const btn = document.querySelector("button");
const overlay = document.querySelector(".overlay");
const imgArr=[];
/* 添加图片循环 */
for (let i = 1; i < 11; i++) {
    const newImage = document.createElement("img");
    newImage.setAttribute("src", "images/pic" + i + ".jpg");
    imgArr[i]="images/pic" + i + ".jpg";
    thumbBar.appendChild(newImage);
    console.log(imgArr);
  }
  var index=1;
function qiehuan(){
  displayedImage.setAttribute("src", imgArr[index]);
    index++;
    if(index > 10){
        index=1;
    }
}
setInterval("qiehuan()",3000);
  /* 切换图片 */
thumbBar.addEventListener("click", function(event) {
    const src = event.target.getAttribute("src");
    displayedImage.setAttribute("src", src);
  });

/* addEventListener 和 removeEventListener 可以增加和删除事件 */
  /* 编写 变暗/变量 按钮功能 */
btn.addEventListener("click", function(event) {
    const color = event.target.getAttribute("class");
    if (color === "dark") {
      btn.setAttribute("class", "light");
      btn.textContent = "变亮";
      overlay.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
    } else {
      btn.setAttribute("class", "dark");
      btn.textContent = "变暗";
      overlay.style.backgroundColor = "rgba(0, 0, 0, 0)";
    }
  });